<template>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        订单管理
        <small>管理您的订单</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-calendar-minus-o"></i> 订单管理</a></li>
        <li class="active">订单详情</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">

          <div class="box" style="background: #efefef">
            <div class="box-header">
              <h3 class="box-title">订单总览</h3>
              <router-link to="/main/addOrder">
                <el-button class="pull-right" type="success">添加订单<i class="el-icon-circle-plus-outline el-icon--right"></i></el-button>
              </router-link>
            </div>
            <section class="content">
              <div class="row">
                <div class="col-xs-12">

                  <div v-for="order in orderList" :key="order.id" class="box box-default"
                       style="border-radius: 15px;position: relative">
                    <img alt="1" src="../../../public/img/pendingorder.png"
                         style="width: 60px;margin-left: 10px;margin-top: 10px;border-radius: 5px"/>
                    <span style="margin-left: 10px;font-size: large;font-weight: bold">订单id：{{ order.id }}</span>
                    <span style="position: absolute;left: 80px;top: 50px"><span class="fa fa-user">&nbsp;&nbsp;</span>下单人：{{ order.orderUser }}</span>
                    <span style="position: absolute;left: 55vw;top: 50px;font-weight: bold"><span class="fa fa-cny">&nbsp;&nbsp;</span>总价：{{ order.price }}元</span>
                    <div style="margin-left: 12px;margin-top: 7px;padding:0; width: 80vw;height:1px;background-color:#8aabe5;overflow:hidden;"></div>
                    <div style="margin-left: 15px;margin-top: 10px"><span class="fa fa-phone">&nbsp;&nbsp;</span>联系电话：{{ order.orderPhone }}</div>
                    <div style="margin-left: 15px;margin-top: 10px"><span class="fa fa-clock-o">&nbsp;&nbsp;</span>下单时间：{{ order.orderTime }}</div>
                    <div style="margin-left: 15px;margin-top: 10px"><span class="fa fa-paper-plane-o">&nbsp;&nbsp;</span>发出时间：{{ order.sendTime }}</div>
                    <div style="margin-left: 15px;margin-top: 10px"><span class="fa fa-home">&nbsp;&nbsp;</span>收货地址：{{ order.orderLocation }}</div>
                    <div style="margin-left: 15px;margin-top: 10px"><span class="fa fa-calendar-minus-o">&nbsp;&nbsp;</span>订单状态：{{ order.status }}</div>
                    <span style="position: absolute;left: 52vw;top: 207px"><span class="fa fa-dropbox">&nbsp;&nbsp;</span>拣货员：{{ order.operator }}</span>
                    <div style="margin-left: 12px;margin-top: 7px;padding:0; width: 80vw;height:1px;background-color:#8aabe5;overflow:hidden;"></div>
                    <router-link :to="'/main/orderContent/'+order.id">
                      <el-button style="margin-left: 3vw;margin-top: 15px" type="primary">查看内容</el-button>
                    </router-link>
                    <router-link :to="'/main/changeOrder/'+order.id">
                      <el-button style="margin-left: 2vw;margin-top: 15px" type="warning">修改<i class="el-icon-edit el-icon--right"></i></el-button>
                    </router-link>
                    <el-button :onclick="'deleteOrder('+order.id+')'" style="margin-left: 2vw;margin-top: 15px" type="danger">删除<i class="el-icon-delete el-icon--right"></i></el-button>
                    <div>&nbsp;</div>
                  </div>

                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </section>

          </div>

        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->

  </div>
  <!-- /.content-wrapper -->
</template>

<script>
export default {
  name: "OrderManager",
  methods: {
    deleteOrder(id) {
      let index = this.GLOBAL.appData.orderList.findIndex((e)=>{
        return e.id===id;
      });
      this.GLOBAL.appData.orderList.splice(index,1);
      this.orderList = this.GLOBAL.appData.orderList;
      this.$message.success('删除成功');
    }
  },
  data() {
    return {
      orderList: this.GLOBAL.appData.orderList
    }
  },
  created() {
    window.deleteOrder = this.deleteOrder;
  },
  mounted() {
    $(document).ready(function () {
      // 选择框
      $(".select2").select2();

      // WYSIHTML5编辑器
      $(".textarea").wysihtml5({
        locale: 'zh-CN'
      });
    });

    $(function() {
      $("#example1").DataTable({
        "language": {
          //"info": "当前第_PAGE_页，共 _PAGES_页",
          "sInfo": "当前显示第 _START_ 到第 _END_ 条，共 _TOTAL_ 条",
          "sInfoFiltered": "(从_MAX_条筛选 )",
          "sInfoEmpty": "共筛选到0条",
          "sSearch": "搜索:",
          "sLengthMenu": "每页显示 _MENU_ 条",
          "sZeroRecords": "未筛选到相关内容",
          "paginate": {
            "sFirst": "首页",  //首页和尾页必须在pagingType设为full_numbers时才可以
            "sLast": "尾页",
            "sPrevious": "上一页",
            "sNext": "下一页",
            "first": "First page",
            "last": "Last page",
            "next": "Next page",
            "previous": "Previous page"
          }
        }
      });
    });
  }
}
</script>

<style scoped>

</style>
